dojo.provide("lotex.html.Form");

dojo.require("dojo.lang.declare");
dojo.require("dojo.json");

dojo.require("lotex.io");
dojo.require("lotex.data");
dojo.require("lotex.xml");
dojo.require("lotex.string");

dojo.require("rptp.app");

dojo.declare("lotex.html.Form", null,
    function(name) {
        this.name = name;
    },
{
    load: function(data) {
        this.metadata = data;
    },

    setName: function() {
        return this.name;
    },

    getId: function() {
        return this.name;
    },

    toHtml: function() {
        var f = lotex.string.sprintf;
        var form = this.metadata;
        //this.name = form.name;

        var sb = [];

        /*<form id="datasource" action="/api/save.do" ... method="post">*/
        sb.push('<form ');
        sb.push(lotex.xml.addAttrOrNone("class",
            lotex.data.getValueOrNull("classname",form.style)));

        sb.push(lotex.xml.addAttrOrNone("style",
            lotex.data.getValueOrNull("stylestring",form.style)));

        sb.push(f(' id="'+this.getId()+'" action="${action}" method="post">',form));
        /************************************************/
        sb.push('<ul id="formFields">');

        var fields = form.elements;
        var len = fields.length;
        for (var i=0; i<len; i++) {
            field = fields[i];

            if(field.name=="id") {
                sb.push(this.hiddenElement(field.name, field.value));
            } else {
                sb.push('<li class="">');
                sb.push(f('<label class="desc">${label} ： </label>', field));
                sb.push('<div>');

                sb.push(this.formElement(field));

                sb.push('</div>');
                sb.push('</li>');
            }
        }


        //if ( this.formArgs.buttonStyle!="none" ) {
            sb.push('<li class="buttons">');
            sb.push('<div>');
            sb.push('<input type="button" class="btTxt" name="save" value="Save" onclick="lotex.Forms.get(\''+this.name+'\').submit()" />');
            sb.push('<input type="reset" class="btTxt" name="Reset" value="Reset" />');
            sb.push('<input type="submit" class="btTxt" value="Submit (POST)">');
            sb.push('</li>');
        //}

        sb.push('</ul>');
        sb.push("</form>");

        return sb.join('');
    },

    formElement: function(/*Object*/element) {
        if(element.type=="SELECTBOX") {
            return this.selectBox(element.name, element.value);
        } else {
            return this.inputBox(element.name, element.value);
        }
    },

    inputBox: function(name, value) {
        var eid = this.name + "." + name;
        var ret = '<input type="text" id="'+eid+'" name="'+name+'"';
        if((!dj_undef("value", field)) && !lotex.string.isBlank(field.value)) {
            ret += ' value="'+value+'"';
        }
        ret += ' class="field text large" />';
        return ret;
    },

    // <input type="hidden" name="method" value="save">
    hiddenElement: function(name, value) {
        var ret = '<input type="hidden" name="'+name+'"';
        if((!dj_undef("value", field)) && !lotex.string.isBlank(field.value)) {
            ret += ' value="'+value+'"';
        }
        ret += ' />';
        return ret;
    },

    // TODO refact
    selectBox: function(id, choice,/*Array*/values) {
        var f = lotex.string.sprintf;
        var sb = [];
        sb.push('<select id="'+id+'" name="'+id+'" class="field select medium">');

        var len = values.length;
        for (var i=0; i<len; i++) {
            var value = values[i][0];
            var caption = values[i][1];
            sb.push('<option value="'+value+'"');
            if(value==choice)sb.push('selected="selected"');
            sb.push('>'+caption+'</option>');
        }
        sb.push('</select>');
        return sb.join('');
    }
});